<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <div th:replace="_fragments::basicrefrence"></div>

    <meta name="description" content="本页面是博客内容展示页面">

    <link rel="stylesheet" href="/lib/tocbot/tocbot.css" />
    <link rel="stylesheet" href="/lib/prism/prism.css" />
    <link rel="stylesheet" href="/lib/typo/typo.css" />
    <link rel="stylesheet" href="/lib/animate/animate.css" />
    <script src="/lib/prism/prism.js"></script>
    <script src="/lib/tocbot/tocbot.min.js"></script>
    <script src="/lib/qrcode/qrcode.min.js"></script>
    <script src="/lib/scrollTo/jquery.scrollTo.min.js"></script>
    <script src="/lib/waypoints/jquery.waypoints.min.js"></script>
    <script src="/js/showdown.min.js"></script>
</head>


<!--网页主体-->
<body>

    <!--网页头-->
    <nav th:replace="_fragments::guesthead"></nav>


    <div id="waypoint" class="m-tenDistance">
        <div class="ui container animated pluse" style="align-self: center">

            <!--作者信息-->
            <div class="ui top attached segment">
                <div class="ui grid">
                    <div class="twelve wide column">
                        <div class="ui horizontal list">
                            <div class="item">
                                <img src="/images/MyHead.jpg" class="ui avatar image">
                                    <a href="/about">大地崩坏苍蝇兽</a>
                            </div>
                            <div class="item">
                                <i class="calendar icon"></i>
                                <span id="blogDate"></span>
                            </div>
                            <div class="item">
                                <i class="eye icon"></i>
                                <span id="blogView"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--文章图片-->
            <div class="ui attached segment">
                <img id="blogPicture" class="ui rounded image">
            </div>


            <div class="ui attached padded segment">
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label" id="blogTag"></div>
                </div>

                <h1 class="ui centered header m-title" id="titleH1"></h1>
                <!--文章内容-->
                <div id="content" class="typo m-padding-lr js-toc-content"></div>
                <!--标签-->
                <div class="m-padding-lr">
                    <div class="ui teal basic left pointing label" id="blogType"></div>
                </div>
                <!--赞赏-->
                <div class="ui center aligned basic segment">
                    <div class="m-padding-lr">
                        <button id="startFlatteryBtn" class="ui large orange basic circular label">我觉得可以</button>
                        <div class="ui flowing popup top transition hidden startFlattery">
                            <div class="ui orange basic label">
                                <div class="ui images">
                                    <img src="images/niuPi.jpg" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--信息说明-->
            <div class="ui attached message">
                <div class="ui grid">
                    <div class="eleven wide column">
                        <ui>
                            <li>作者:大地崩坏苍蝇兽</li>
                            <li>没什么要说的</li>
                            <li>这条也没什么要说的</li>
                            <li>这条也不知道说什么</li>
                            <li>这条什么都不想说</li>
                        </ui>
                    </div>

                    <div class="five wide column">
                        <img src="images/mainPic.jpg" class="ui right floated rounded bordered image"/>
                    </div>
                </div>
            </div>


            <!--评论-->
<!--            <div class="ui bottom attached segment">-->

<!--                <div class="ui-comment-container" th:fragment="commentList">-->
<!--                    <h3 class="ui dividing header">评论区</h3>-->
<!--                    <div class="ui comments">-->

<!--                        <div class="comment" th:each="comment:${commentList}" >-->
<!--                            <div th:if="${comment.parentCommentId == -1}">-->
<!--                                <div class="avatar">-->
<!--                                    <img th:src="${comment.head}">-->
<!--                                </div>-->
<!--                                <div class="content">-->
<!--                                    <span class="author" style="font-size: 10px" th:text="${comment.author}"></span>-->
<!--                                    <div class="metadata">-->
<!--                                        <span class="date" th:text="${#dates.format(comment.createDate,'yyyy-MM-dd')}"></span>-->
<!--                                    </div>-->
<!--                                    <div class="text">-->
<!--                                        <p th:text="${comment.content}"></p>-->
<!--                                    </div>-->
<!--                                    <span class="actions">-->
<!--                                        <a th:data-comment-id="${comment.id}" th:data-this-id="${comment.id}" th:data-author-name="${comment.author}" onclick="chooseComment(this)" class="reply">回复</a>-->
<!--                                        <a th:data-comment-id="${comment.id}" onclick="deleteComment(this)" class="delete">删除</a>-->
<!--                                    </span>-->
<!--                                </div>-->
<!--                                &lt;!&ndash;子级评论&ndash;&gt;-->
<!--                                <div class="ui comments">-->
<!--                                    <div class="comment" th:each="sonComment:${commentList}" th:if="${sonComment.topCommentId == comment.id}">-->
<!--                                        <div class="avatar">-->
<!--                                            <img th:src="${sonComment.head}">-->
<!--                                        </div>-->
<!--                                        <div class="content">-->
<!--                                            <span class="author" style="font-size: 10px" th:text="${sonComment.author}"></span>-->
<!--                                            <div class="metadata">-->
<!--                                                <span class="date" th:text="${#dates.format(sonComment.createDate,'yyyy-MM-dd')}"></span>-->
<!--                                            </div>-->
<!--                                            <div class="text">-->
<!--                                                <p th:text="${sonComment.content}"></p>-->
<!--                                            </div>-->
<!--                                            <span class="actions">-->
<!--                                                <a th:data-comment-id="${comment.id}" th:data-this-id="${sonComment.id}" th:data-author-name="${sonComment.author}" onclick="chooseComment(this)" class="reply">回复</a>-->
<!--                                                <a th:data-comment-id="${sonComment.id}"  onclick="deleteComment(this)" class="delete">删除</a>-->
<!--                                            </span>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->

<!--                        </div>-->

<!--                    </div>-->
<!--                </div>-->

<!--                    <form id="form" action="#" class="ui reply form">-->
<!--                        <div class="field">-->
<!--                            <textarea id="comment" name="content" placeholder="叽里呱啦。。。。"></textarea>-->
<!--                        </div>-->
<!--                        <div class="fields">-->
<!--                            <div class="field">-->
<!--                                <div class="ui selection dropdown compact label">-->
<!--                                    <input type="hidden" id="head" name="head"/>-->
<!--                                    <i class="dropdown icon"></i>-->
<!--                                    <div class="default text">头像</div>-->
<!--                                    <div class="menu">-->
<!--                                        <div class="item" data-value="images/head/1.gif"><img src="images/head/1.gif"></div>-->
<!--                                        <div class="item" data-value="images/head/2.gif"><img src="images/head/2.gif"></div>-->
<!--                                        <div class="item" data-value="images/head/3.gif"><img src="images/head/3.gif"></div>-->
<!--                                        <div class="item" data-value="images/head/4.gif"><img src="images/head/4.gif"></div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="field">-->
<!--                                <input type="text" placeholder="昵称" id="author" name="author" />-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        <div class="ui error message"></div>-->

<!--                        <div class="ui blue labeled icon button" id="btn">-->
<!--                            <i class="icon edit"></i> 发表评论-->
<!--                        </div>-->
<!--                        <input type="hidden" id="blogId" name="blogId"/>-->
<!--                        <input type="hidden" id="parentCommentId" name="parentCommentId" value="-1" />-->
<!--                        <input type="hidden" id="topCommentId" name="topCommentId" value="-1" />-->
<!--                    </form>-->
<!--            </div>-->
        </div>
    </div>


    <div id="toolDiv" style="display: none" class="ui vertical icon buttons m-click-self-hide m-fixed">
        <button id="toTopBtn" type="button" class="ui teal button" ><i class="chevron up icon"></i></button>
        <button id="containerShow" type="button" class="ui teal button w" >目录</button>
        <div style="width: 250px" class="ui toc-container flowing popup transition hidden startFlattery">
            <ol class="js-toc"></ol>
        </div>
    </div>


    <footer th:replace="_fragments::guestfoot"></footer>


</body>

<script type="text/javascript">
    //赞赏启动
    $("#startFlatteryBtn").popup({
        popup:$(".startFlattery.popup"),
        on:'click'
    })

    $("#containerShow").popup({
        popup:$(".toc-container.popup"),
        on:'click',
        position:'right center'
    })


    tocbot.init({
        tocSelector: '.js-toc',
        contentSelector: '.js-toc-content',
        heading:'h1, h2'
    });

    $('#toTopBtn').click(function () {
        $(window).scrollTo(0,500);
    })

    var waypoint = new Waypoint({
        element: document.getElementById("waypoint"),
        handler: function (direction) {
            if(direction == 'down'){
                $("#toolDiv").show(500);
            }else{
                $("#toolDiv").hide(500);
            }
        }
    })

    function chooseComment (obj) {
        var commentId = $(obj).data('commentId');
        var authorName = $(obj).data('authorName');
        var thisId = $(obj).data('thisId');
        $('#comment').attr('placeholder',"@" + authorName).focus();
        $('#topCommentId').val(commentId);
        $('#parentCommentId').val(thisId);
        $(window).scrollTo($('.form'),500);
    }

    // TODO 暂时取消评论功能
    // $('#btn').click(function () {
    //     var res = $('.ui.form').form('validate form');
    //     if (res){
    //         addComment();
    //     }
    // })

    function addComment(){
        var comment = $('#comment');
        var first = comment[0].placeholder
        var commentContent;
        if (first == "叽里呱啦。。。。"){
            commentContent = comment.val();
        }else{
            commentContent = comment[0].placeholder + "  " + comment.val();
        }
        $('.ui-comment-container').load(
            "/addComment",
            {
                content:commentContent,
                head:$('#head').val(),
                author:$('#author').val(),
                blog_id:$('#blogId').val(),
                top_comment_id:$('#topCommentId').val(),
                parent_comment_id:$('#parentCommentId').val()
            },
            function (resp,status,xhr){
                clearForm();
                $(window).scrollTo('.ui-comment-container',1000);
            }
        );
    }

    function clearForm(){
        $('#comment').attr('placeholder',"叽里呱啦。。。。").val("");
        $('#parentCommentId').val(-1);
        $('#topCommentId').val(-1);
        $('#author').val("");
    }


    function deleteComment(obj) {
        if(confirm("是否确定删除本条评论？")){
            var id = $(obj).data('commentId');
            $('.ui-comment-container').load(
                "/delComment",
                {
                    id:id
                },
                function (resp,status,xhr){
                    $(window).scrollTo('.ui-comment-container',1000);
                }
            );
        }
    }

    var urlParam = window.location.search;
    var blogId = urlParam.substring(urlParam.indexOf("id=") + 3);

    $(function () {
        $.ajax({
            url:"/getBlog",
            data:{
                id:blogId
            },
            success:function (resp) {
                if (resp.code === 0) {
                    return;
                }
                let blog = resp.data;
                $("title").html(blog.title);
                $('#blogId').val(blog.id);
                $('#blogType').text(blog.types.name);
                $('#content').html(new showdown.Converter().makeHtml(blog.content));
                $('#titleH1').text(blog.title);
                $('#blogTag').text(blog.tag===1?'原创':'搬运');
                $('#blogPicture').attr("src",blog.picture);
                $('#blogView').text(blog.view);
                let blogCreateDate = new Date(blog.updateDate);
                $('#blogDate').text(blogCreateDate.getFullYear() + "-" + (blogCreateDate.getMonth()+1) + "-" + blogCreateDate.getDate());
            }
        })
    })

</script>

</html>